
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI - ThemeRoller</title>

<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css"
	type="text/css" media="all" />
<link rel="stylesheet"
	href="http://static.jquery.com/ui/themeroller/app_css/app_screen.css"
	type="text/css" media="all" />

<script type="text/javascript">
	$(function() {
		// Accordion
		$("#accordion").accordion({
			header : "h3"
		});
		// Autocomplete
		$("#autocomplete").autocomplete(
				{
					source : [ "c++", "java", "php", "coldfusion",
							"javascript", "asp", "ruby", "python", "c",
							"scala", "groovy", "haskell", "perl" ]
				});
		// Button
		$("#button").button();
		$("#radioset").buttonset();
		// Tabs
		$('#tabs').tabs();
		// Dialog			
		$('#dialog').dialog({
			autoOpen : false,
			width : 600,
			buttons : {
				"Ok" : function() {
					$(this).dialog("close");
				},
				"Cancel" : function() {
					$(this).dialog("close");
				}
			}
		});
		// Dialog Link
		$('#dialog_link').click(function() {
			$('#dialog').dialog('open');
			return false;
		});
		// Datepicker
		$('#datepicker').datepicker({
			inline : true
		});
		// Slider
		$('#slider').slider({
			range : true,
			values : [ 17, 67 ]
		});
		// Progressbar
		$("#progressbar").progressbar({
			value : 20
		});
		//hover states on the static widgets
		$('#dialog_link, ul#icons li').hover(function() {
			$(this).addClass('ui-state-hover');
		}, function() {
			$(this).removeClass('ui-state-hover');
		});
	});
</script>
<style type="text/css">
#jq-books {
	width: 200px;
	float: right;
	margin-right: 0
}

#jq-books li {
	line-height: 1.25em;
	margin: 1em 0 1.8em;
	clear: left
}

#home-content-wrapper #jq-books a.jq-bookImg {
	float: left;
	margin-right: 10px;
	width: 55px;
	height: 70px
}

#jq-books h3 {
	margin: 0 0 .2em 0
}

#home-content-wrapper #jq-books h3 a {
	font-size: 1em;
	color: black;
}

#home-content-wrapper #jq-books a.jq-buyNow {
	font-size: 1em;
	color: white;
	display: block;
	background:
		url(http://static.jquery.com/files/rocker/images/btn_blueSheen.gif)
		50% repeat-x;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	padding: .2em .8em;
	float: left;
	margin-top: .2em;
}
</style>
</head>

<body id="themeroller">
	<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
	<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
	<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
	<div id="wrapper">
		<div id="banner">
			<h1 class="logo">
				<a href="http://www.jqueryui.com" title="jQuery UI" target="_blank"><span>jQuery UI</span> </a>
			</h1>
			<div id="dock">
				<div class="left"></div>
			
				<div class="right"></div>
			</div>
		</div>
		<div id="content-wrapper">
			<div id="content">
				<div class="content-top"></div>
				<div class="content">



					<div id="application-content" class="clearfix">



						<div id="components" class="clearfix">









							<div id="getBookmarklet">

								<p>
									<span class="icon"></span><strong>New!</strong> Bring
									ThemeRoller into any page: <a
										href="/themeroller/developertool/">Get the ThemeRoller
										Firefox Bookmarklet!</a>
								</p>

							</div>



							<div id="compGroupA" class="clearfix">



								<!-- Accordion -->

								<h2 class="demoHeaders">Accordion</h2>

								<div id="accordion">

									<h3>
										<a href="#">Section 1</a>
									</h3>

									<div>

										<p>Mauris mauris ante, blandit et, ultrices a, suscipit
											eget, quam. Integer ut neque. Vivamus nisi metus, molestie
											vel, gravida in, condimentum sit amet, nunc. Nam a nibh.
											Donec suscipit eros. Nam mi. Proin viverra leo ut odio.
											Curabitur malesuada. Vestibulum a velit eu ante scelerisque
											vulputate.</p>

									</div>

									<h3>
										<a href="#">Section 2</a>
									</h3>

									<div>

										<p>Sed non urna. Donec et ante. Phasellus eu ligula.
											Vestibulum sit amet purus. Vivamus hendrerit, dolor at
											aliquet laoreet, mauris turpis porttitor velit, faucibus
											interdum tellus libero ac justo. Vivamus non quam. In
											suscipit faucibus urna.</p>

									</div>

									<h3>
										<a href="#">Section 3</a>
									</h3>

									<div>

										<p>Nam enim risus, molestie et, porta ac, aliquam ac,
											risus. Quisque lobortis. Phasellus pellentesque purus in
											massa. Aenean in pede. Phasellus ac libero ac tellus
											pellentesque semper. Sed ac felis. Sed commodo, magna quis
											lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus
											venenatis dui.</p>

										<ul>

											<li>List item one</li>

											<li>List item two</li>

											<li>List item three</li>

										</ul>

									</div>

								</div>



								<!-- Tabs -->

								<h2 class="demoHeaders">Tabs</h2>

								<div id="tabs">

									<ul>

										<li><a href="#tabs-1">First</a></li>

										<li><a href="#tabs-2">Second</a></li>

										<li><a href="#tabs-3">Third</a></li>

									</ul>

									<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
										adipisicing elit, sed do eiusmod tempor incididunt ut labore
										et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
										exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat.</div>

									<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras
										orci urna, blandit id, pretium vel, aliquet ornare, felis.
										Maecenas scelerisque sem non nisl. Fusce sed lorem in enim
										dictum bibendum.</div>

									<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
										sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
										sagittis et, consequat vestibulum, lacus. Mauris porttitor
										ullamcorper augue.</div>

								</div>



								<!-- Dialog -->

								<h2 class="demoHeaders">Dialog</h2>

								<p>
									<a href="#" id="dialog_link"
										class="ui-state-default ui-corner-all"><span
										class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
								</p>





								<h2 class="demoHeaders">Overlay and Shadow Classes</h2>

								<div
									style="position: relative; width: 96%; height: 200px; padding: 1% 4%; overflow: hidden;"
									class="fakewindowcontain">

									<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id
										elit quis purus consectetur consequat.</p>
									<p>Nam congue semper tellus. Sed erat dolor, dapibus sit
										amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
										Suspendisse scelerisque dui nec velit. Duis augue augue,
										gravida euismod, vulputate ac, facilisis id, sem. Morbi in
										orci.</p>
									<p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis
										nec, quam. Nam molestie scelerisque quam. Nullam feugiat
										cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing
										elit. Donec libero risus, commodo vitae, pharetra mollis,
										posuere eu, pede. Nulla nec tortor. Donec id elit quis purus
										consectetur consequat.</p>
									<p>Nam congue semper tellus. Sed erat dolor, dapibus sit
										amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
										Suspendisse scelerisque dui nec velit. Duis augue augue,
										gravida euismod, vulputate ac, facilisis id, sem. Morbi in
										orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis
										nec, quam. Nam molestie scelerisque quam.</p>
									<p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet,
										consectetur adipiscing elit. Donec libero risus, commodo
										vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor.
										Donec id elit quis purus consectetur consequat. Nam congue
										semper tellus. Sed erat dolor, dapibus sit amet, venenatis
										ornare, ultrices ut, nisi. Aliquam ante.</p>
									<p>Suspendisse scelerisque dui nec velit. Duis augue augue,
										gravida euismod, vulputate ac, facilisis id, sem. Morbi in
										orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis
										nec, quam. Nam molestie scelerisque quam. Nullam feugiat
										cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing
										elit. Donec libero risus, commodo vitae, pharetra mollis,
										posuere eu, pede. Nulla nec tortor. Donec id elit quis purus
										consectetur consequat.</p>



									<!-- ui-dialog -->

									<div class="ui-overlay">
										<div class="ui-widget-overlay"></div>
										<div class="ui-widget-shadow ui-corner-all"
											style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div>
									</div>

									<div
										style="position: absolute; width: 280px; height: 130px; left: 50px; top: 30px; padding: 10px;"
										class="ui-widget ui-widget-content ui-corner-all">



										<p>Lorem ipsum dolor sit amet, consectetur adipisicing
											elit, sed do eiusmod tempor incididunt ut labore et dolore
											magna aliqua. Ut enim ad minim veniam, quis nostrud
											exercitation ullamco laboris nisi ut aliquip ex ea commodo
											consequat.</p>



									</div>



								</div>





								<!-- ui-dialog -->

								<div id="dialog" title="Dialog Title">

									<p>Lorem ipsum dolor sit amet, consectetur adipisicing
										elit, sed do eiusmod tempor incididunt ut labore et dolore
										magna aliqua. Ut enim ad minim veniam, quis nostrud
										exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat.</p>

								</div>







								<h2 class="demoHeaders">Framework Icons (content color
									preview)</h2>

								<ul id="icons" class="ui-widget ui-helper-clearfix">



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-n"><span
										class="ui-icon ui-icon-carat-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-ne"><span
										class="ui-icon ui-icon-carat-1-ne"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-e"><span
										class="ui-icon ui-icon-carat-1-e"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-se"><span
										class="ui-icon ui-icon-carat-1-se"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-s"><span
										class="ui-icon ui-icon-carat-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-sw"><span
										class="ui-icon ui-icon-carat-1-sw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-w"><span
										class="ui-icon ui-icon-carat-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-1-nw"><span
										class="ui-icon ui-icon-carat-1-nw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-2-n-s"><span
										class="ui-icon ui-icon-carat-2-n-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-carat-2-e-w"><span
										class="ui-icon ui-icon-carat-2-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-n"><span
										class="ui-icon ui-icon-triangle-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-ne"><span
										class="ui-icon ui-icon-triangle-1-ne"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-e"><span
										class="ui-icon ui-icon-triangle-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-se"><span
										class="ui-icon ui-icon-triangle-1-se"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-s"><span
										class="ui-icon ui-icon-triangle-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-sw"><span
										class="ui-icon ui-icon-triangle-1-sw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-w"><span
										class="ui-icon ui-icon-triangle-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-1-nw"><span
										class="ui-icon ui-icon-triangle-1-nw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-2-n-s"><span
										class="ui-icon ui-icon-triangle-2-n-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-triangle-2-e-w"><span
										class="ui-icon ui-icon-triangle-2-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-n"><span
										class="ui-icon ui-icon-arrow-1-n"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-ne"><span
										class="ui-icon ui-icon-arrow-1-ne"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-e"><span
										class="ui-icon ui-icon-arrow-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-se"><span
										class="ui-icon ui-icon-arrow-1-se"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-s"><span
										class="ui-icon ui-icon-arrow-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-sw"><span
										class="ui-icon ui-icon-arrow-1-sw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-w"><span
										class="ui-icon ui-icon-arrow-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-1-nw"><span
										class="ui-icon ui-icon-arrow-1-nw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-2-n-s"><span
										class="ui-icon ui-icon-arrow-2-n-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-2-ne-sw"><span
										class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-2-e-w"><span
										class="ui-icon ui-icon-arrow-2-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-2-se-nw"><span
										class="ui-icon ui-icon-arrow-2-se-nw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowstop-1-n"><span
										class="ui-icon ui-icon-arrowstop-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowstop-1-e"><span
										class="ui-icon ui-icon-arrowstop-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowstop-1-s"><span
										class="ui-icon ui-icon-arrowstop-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowstop-1-w"><span
										class="ui-icon ui-icon-arrowstop-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-n"><span
										class="ui-icon ui-icon-arrowthick-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-ne"><span
										class="ui-icon ui-icon-arrowthick-1-ne"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-e"><span
										class="ui-icon ui-icon-arrowthick-1-e"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-se"><span
										class="ui-icon ui-icon-arrowthick-1-se"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-s"><span
										class="ui-icon ui-icon-arrowthick-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-sw"><span
										class="ui-icon ui-icon-arrowthick-1-sw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-w"><span
										class="ui-icon ui-icon-arrowthick-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-1-nw"><span
										class="ui-icon ui-icon-arrowthick-1-nw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-2-n-s"><span
										class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-2-ne-sw"><span
										class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-2-e-w"><span
										class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthick-2-se-nw"><span
										class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthickstop-1-n"><span
										class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthickstop-1-e"><span
										class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthickstop-1-s"><span
										class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowthickstop-1-w"><span
										class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturnthick-1-w"><span
										class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturnthick-1-n"><span
										class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturnthick-1-e"><span
										class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturnthick-1-s"><span
										class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturn-1-w"><span
										class="ui-icon ui-icon-arrowreturn-1-w"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturn-1-n"><span
										class="ui-icon ui-icon-arrowreturn-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturn-1-e"><span
										class="ui-icon ui-icon-arrowreturn-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowreturn-1-s"><span
										class="ui-icon ui-icon-arrowreturn-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowrefresh-1-w"><span
										class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowrefresh-1-n"><span
										class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowrefresh-1-e"><span
										class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrowrefresh-1-s"><span
										class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-4"><span
										class="ui-icon ui-icon-arrow-4"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-arrow-4-diag"><span
										class="ui-icon ui-icon-arrow-4-diag"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-extlink"><span
										class="ui-icon ui-icon-extlink"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-newwin"><span
										class="ui-icon ui-icon-newwin"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-refresh"><span
										class="ui-icon ui-icon-refresh"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-shuffle"><span
										class="ui-icon ui-icon-shuffle"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-transfer-e-w"><span
										class="ui-icon ui-icon-transfer-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-transferthick-e-w"><span
										class="ui-icon ui-icon-transferthick-e-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-folder-collapsed"><span
										class="ui-icon ui-icon-folder-collapsed"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-folder-open"><span
										class="ui-icon ui-icon-folder-open"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-document"><span
										class="ui-icon ui-icon-document"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-document-b"><span
										class="ui-icon ui-icon-document-b"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-mail-closed"><span
										class="ui-icon ui-icon-mail-closed"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-mail-open"><span
										class="ui-icon ui-icon-mail-open"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-suitcase"><span
										class="ui-icon ui-icon-suitcase"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-comment"><span
										class="ui-icon ui-icon-comment"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-person"><span
										class="ui-icon ui-icon-person"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-print"><span
										class="ui-icon ui-icon-print"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-trash"><span
										class="ui-icon ui-icon-trash"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-locked"><span
										class="ui-icon ui-icon-locked"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-unlocked"><span
										class="ui-icon ui-icon-unlocked"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-bookmark"><span
										class="ui-icon ui-icon-bookmark"></span></li>

									<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span
										class="ui-icon ui-icon-tag"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-calculator"><span
										class="ui-icon ui-icon-calculator"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-pencil"><span
										class="ui-icon ui-icon-pencil"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-clock"><span
										class="ui-icon ui-icon-clock"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-calendar"><span
										class="ui-icon ui-icon-calendar"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-zoomin"><span
										class="ui-icon ui-icon-zoomin"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-zoomout"><span
										class="ui-icon ui-icon-zoomout"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-search"><span
										class="ui-icon ui-icon-search"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-wrench"><span
										class="ui-icon ui-icon-wrench"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-heart"><span
										class="ui-icon ui-icon-heart"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-cancel"><span
										class="ui-icon ui-icon-cancel"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-plusthick"><span
										class="ui-icon ui-icon-plusthick"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-minus"><span
										class="ui-icon ui-icon-minus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-minusthick"><span
										class="ui-icon ui-icon-minusthick"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-close"><span
										class="ui-icon ui-icon-close"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-closethick"><span
										class="ui-icon ui-icon-closethick"></span></li>



									<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span
										class="ui-icon ui-icon-key"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-lightbulb"><span
										class="ui-icon ui-icon-lightbulb"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-scissors"><span
										class="ui-icon ui-icon-scissors"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-clipboard"><span
										class="ui-icon ui-icon-clipboard"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-contact"><span
										class="ui-icon ui-icon-contact"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-image"><span
										class="ui-icon ui-icon-image"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-video"><span
										class="ui-icon ui-icon-video"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-script"><span
										class="ui-icon ui-icon-script"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-alert"><span
										class="ui-icon ui-icon-alert"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-notice"><span
										class="ui-icon ui-icon-notice"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-check"><span
										class="ui-icon ui-icon-check"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-bullet"><span
										class="ui-icon ui-icon-bullet"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-radio-off"><span
										class="ui-icon ui-icon-radio-off"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-radio-on"><span
										class="ui-icon ui-icon-radio-on"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-pin-w"><span
										class="ui-icon ui-icon-pin-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-pin-s"><span
										class="ui-icon ui-icon-pin-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-pause"><span
										class="ui-icon ui-icon-pause"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-seek-next"><span
										class="ui-icon ui-icon-seek-next"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-seek-prev"><span
										class="ui-icon ui-icon-seek-prev"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-seek-end"><span
										class="ui-icon ui-icon-seek-end"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-seek-first"><span
										class="ui-icon ui-icon-seek-first"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span>
									</li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-eject"><span
										class="ui-icon ui-icon-eject"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-volume-off"><span
										class="ui-icon ui-icon-volume-off"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-volume-on"><span
										class="ui-icon ui-icon-volume-on"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-power"><span
										class="ui-icon ui-icon-power"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-signal-diag"><span
										class="ui-icon ui-icon-signal-diag"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-signal"><span
										class="ui-icon ui-icon-signal"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-battery-0"><span
										class="ui-icon ui-icon-battery-0"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-battery-1"><span
										class="ui-icon ui-icon-battery-1"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-battery-2"><span
										class="ui-icon ui-icon-battery-2"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-battery-3"><span
										class="ui-icon ui-icon-battery-3"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-plus"><span
										class="ui-icon ui-icon-circle-plus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-minus"><span
										class="ui-icon ui-icon-circle-minus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-close"><span
										class="ui-icon ui-icon-circle-close"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-triangle-e"><span
										class="ui-icon ui-icon-circle-triangle-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-triangle-s"><span
										class="ui-icon ui-icon-circle-triangle-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-triangle-w"><span
										class="ui-icon ui-icon-circle-triangle-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-triangle-n"><span
										class="ui-icon ui-icon-circle-triangle-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-arrow-e"><span
										class="ui-icon ui-icon-circle-arrow-e"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-arrow-s"><span
										class="ui-icon ui-icon-circle-arrow-s"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-arrow-w"><span
										class="ui-icon ui-icon-circle-arrow-w"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-arrow-n"><span
										class="ui-icon ui-icon-circle-arrow-n"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-zoomin"><span
										class="ui-icon ui-icon-circle-zoomin"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-zoomout"><span
										class="ui-icon ui-icon-circle-zoomout"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circle-check"><span
										class="ui-icon ui-icon-circle-check"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circlesmall-plus"><span
										class="ui-icon ui-icon-circlesmall-plus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circlesmall-minus"><span
										class="ui-icon ui-icon-circlesmall-minus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-circlesmall-close"><span
										class="ui-icon ui-icon-circlesmall-close"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-squaresmall-plus"><span
										class="ui-icon ui-icon-squaresmall-plus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-squaresmall-minus"><span
										class="ui-icon ui-icon-squaresmall-minus"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-squaresmall-close"><span
										class="ui-icon ui-icon-squaresmall-close"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-grip-dotted-vertical"><span
										class="ui-icon ui-icon-grip-dotted-vertical"></span></li>



									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-grip-dotted-horizontal"><span
										class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-grip-solid-vertical"><span
										class="ui-icon ui-icon-grip-solid-vertical"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-grip-solid-horizontal"><span
										class="ui-icon ui-icon-grip-solid-horizontal"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-gripsmall-diagonal-se"><span
										class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>

									<li class="ui-state-default ui-corner-all"
										title=".ui-icon-grip-diagonal-se"><span
										class="ui-icon ui-icon-grip-diagonal-se"></span></li>

								</ul>



							</div>
							<!-- /#compGroupA -->





							<div id="compGroupB" class="clearfix">



								<!-- Button -->

								<h2 class="demoHeaders">Button</h2>

								<button id="button">A button element</button>

								<form style="margin-top: 1em;">

									<div id="radioset">

										<input type="radio" id="radio1" name="radio" /><label
											for="radio1">Choice 1</label> <input type="radio" id="radio2"
											name="radio" checked="checked" /><label for="radio2">Choice
											2</label> <input type="radio" id="radio3" name="radio" /><label
											for="radio3">Choice 3</label>

									</div>

								</form>



								<!-- Autocomplete -->

								<h2 class="demoHeaders">Autocomplete</h2>

								<div>

									<input id="autocomplete"
										style="z-index: 100; position: relative"
										title="type &quot;a&quot;" />

								</div>



								<!-- Slider -->

								<h2 class="demoHeaders">Slider</h2>

								<div id="slider"></div>



								<!-- Datepicker -->

								<h2 class="demoHeaders">Datepicker</h2>

								<div id="datepicker"></div>



								<!-- Progressbar -->

								<h2 class="demoHeaders">Progressbar</h2>

								<div id="progressbar"></div>



								<!-- Highlight / Error -->

								<h2 class="demoHeaders">Highlight / Error</h2>

								<div class="ui-widget">

									<div class="ui-state-highlight ui-corner-all"
										style="margin-top: 20px; padding: 0 .7em;">

										<p>
											<span class="ui-icon ui-icon-info"
												style="float: left; margin-right: .3em;"></span> <strong>Hey!</strong>
											Sample ui-state-highlight style.
										</p>

									</div>

								</div>

								<br />

								<div class="ui-widget">

									<div class="ui-state-error ui-corner-all"
										style="padding: 0 .7em;">

										<p>
											<span class="ui-icon ui-icon-alert"
												style="float: left; margin-right: .3em;"></span> <strong>Alert:</strong>
											Sample ui-state-error style.
										</p>

									</div>

								</div>



							</div>
							<!-- /#compGroupB -->



						</div>
						<!-- /#components -->



					</div>
				</div>
			</div>
		</div>

		<div id="footer">
			<div class="bg"></div>
			<div class="inner">
				<p>
					<span class="first">Sponsored by: </span> <a
						class="block filamentgroup" href="http://www.filamentgroup.com"><span>Filamentgroup</span>
					</a> <a href="http://appendto.com" class="block"
						style="background: url('/images/icon_appendto.png'); width: 114px; height: 23px; border: 0; margin: 5px 22px 0px 3px;"><span>appendTo</span>
					</a> <span class="first" style="float: right; padding-right: 12px;">&copy;
						2010 The <a href="http://jquery.org/">jQuery Project</a> and the <a
						href="/about">jQuery UI Team</a>.</span>
				</p>
			</div>
		</div>
	</div>
	<!--[if lte IE 7]></div><![endif]-->
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-1076265-1' ]);
		_gaq.push([ '_trackPageview' ]);
		_gaq.push([ '_setDomainName', '.jqueryui.com' ]);
		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			(document.getElementsByTagName('head')[0] || document
					.getElementsByTagName('body')[0]).appendChild(ga);
		})();
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('a').click(function() {
				this.blur();
			});
		});
	</script>
</body>

</html>